<template>
  <van-cell>
    <!-- 标题 -->
    <template #title>
      <div class="title">
        <van-image round class="img" :src="obj.aut_photo" />
        <div class="name">{{ obj.aut_name }}</div>
      </div>
    </template>

    <!-- 点赞 -->
    <template>
      <div class="value">
        <span>赞</span
        ><van-icon
          :name="obj.is_liking ? 'good-job' : 'good-job-o'"
          @click="zanClick"
        />
      </div>
    </template>

    <!-- label -->
    <template #label>
      <div class="content">{{ obj.content }}</div>
      <div v-if="showLabel" class="huifu">
        <van-button
          size="mini"
          round
          type="primary"
          plain
          @click="$emit('replayPupShow', obj)"
          >回复{{ obj.reply_count }}</van-button
        >
        <span>{{ obj.pubdate | formatTime }}</span>
      </div>
    </template>
  </van-cell>
</template>

<script>
import { commentLike, nocommentLike } from '@/api/commend'
import moment from 'moment'
export default {
  name: 'CommentItem',
  props: {
    obj: {
      type: Object,
      required: true
    },
    showLabel: {
      type: Boolean,
      default: true
    }
  },
  filters: {
    formatTime (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  },
  methods: {
    async zanClick () {
      if (this.obj.is_liking) {
        //  取消点赞
        try {
          await nocommentLike(this.obj.com_id)
          this.$toast('取消点赞成功')
        } catch (err) {
          this.$toast('取消点赞失败')
        }
      } else {
        // 点赞
        try {
          await commentLike({
            target: this.obj.com_id
          })
          this.$toast('点赞成功')
        } catch (err) {
          this.$toast('点赞失败')
        }
      }
      this.$emit('likeCli', this.obj.com_id)
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  display: flex;
  .img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}
.content {
  margin: 10px;
}
.huifu {
  display: flex;
  align-items: center;
  .van-button {
    height: 20px;
    padding: 2px 6px;
    margin-right: 20px;
  }
}
.van-cell__value {
  flex: unset;
}
.value {
  display: flex;
  align-items: center;
  span {
    margin-right: 6px;
  }
}
</style>
